import React from 'react';
import { Select, Button, Form } from 'antd';
import Icon from '@/components/layout/Icon';

const layout = {
  labelCol: { flex: '70px' },
  wrapperCol: { flex: '200px' },
};

const Search = (props) => {
  const { envs = [], projects = [], handleMindFilter, handleMindFilterRest } = props;
  const [form] = Form.useForm();

  const onReset = () => {
    form.resetFields();
    handleMindFilterRest();
  };

  const handleSubmit = () => {
    const data = form.getFieldsValue();
    handleMindFilter?.(data);
  };

  return (
    <div className="mindSearch">
      <Form layout="inline" style={{ marginBottom: '20px' }} colon={false} form={form} {...layout} initialValues={{ project: 'all', env: 'all' }} onFinish={handleSubmit}>
        <Form.Item label="项目名称" name="project">
          <Select options={[{ label: '全部', value: 'all' }, ...projects]} style={{ width: '200px' }}></Select>
        </Form.Item>
        <Form.Item label="环境名称" name="env">
          <Select options={[{ label: '全部', value: 'all' }, ...envs]} style={{ width: '200px' }}></Select>
        </Form.Item>
        <Form.Item>
          <Button onClick={onReset} style={{ marginRight: '10px' }}>
            重 置
          </Button>
          <Button type="primary" htmlType="submit" icon={<Icon src="/images/search.png" width={16} height={16} style={{ marginRight: '4px', verticalAlign: 'text-top' }} />}>
            查 询
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default Search;
